### 第20课 WIFI智慧校园

本WIFI智慧校园课程将指导您开发一个集环境监测与设备控制于一体的物联网应用系统。通过网页端实时监控教室内的温湿度、光照强度等环境数据，并支持远程控制窗帘开关、教室灯与路灯的明灭以及校门启闭状态。一起来助力绿色智慧校园建设吧！



#### 20.1 流程图

![A_17](../../img/A_17.png)



#### 20.2 实验代码

⚠️ **<span style="color: rgb(255, 76, 65);">特别提醒： 打开代码文件后，需要分别将代码中的 `YourWiFiSSID` 和 `YourWiFiPassword` 替换为您自己的 WiFi名称 和 WiFi密码。</span>**

![WIFI](../../img/WIFI.png)

⚠️ **<span style="color: rgb(255, 76, 255);">特别注意：请确保代码中的WiFi名称和WiFi密码与连接到您的电脑、手机/平板、ESP32开发板和路由器的网络相同，它们必须在同一局域网（WiFi）内。</span>**

⚠️ **<span style="color: rgb(255, 76, 255);">特别注意：WiFi必须是2.4Ghz频率的，否则ESP32无法连接WiFi。</span>**


![16](../../img/16.png)

#### 20.3 代码说明

**注意：此课程涉及HTML、CSS、JS等课外知识， 只做简单介绍。**

单击页面左下角的![add](../../img/add.png)

在搜索框输入名称，单击添加库：

![1204](../../img/1204.png)

单击 `返回` 返回编程页面。

![line1](../../img/line1.png)

![1601](../../img/1601.png)

- OLED屏、串口初始化、SK6812 RGB灯初始化、LED灯初始化、舵机初始化

- 设置WiFi账号密码，连接WiFi，等待连接成功将IP地址打印在OLED屏和串口监视器。

  ⚠️ <span style="color: rgb(200, 70, 100);">注意：请将代码里的 WiFi 名称和 WiFi密码替换为您自己的 WiFi名称 和 WiFi密码。</span>

![1602](../../img/1602.png)

- 配置页面的组件1、组件2和组件3
  
  - 组件1：实时显示当前温度值
  
  - 组件2：实时显示当前湿度值
  
  - 组件3：实时显示室内光照值

- 每5秒更新一次数据。

![1603](../../img/1603.png)

- 组件4：点击按钮控制路灯亮灭

![1604](../../img/1604.png)

- 组件5：点击按钮控制教室灯亮灭

![1605](../../img/1605.png)

- 组件6：每按一次控制窗帘拉开2038*2步

- 组件7：每按一次控制窗帘关闭2038*2步

![1606](../../img/1606.png)

- 组件8：点击按钮控制校园大门打开和关闭

![1606-1](../../img/1606-1.png)

- 组件9：点击按钮控制课堂铃声鸣叫和不响

![1606-2](../../img/1606-2.png)

- 组件10：点击按钮控制旗帜降下和停止

![1606-3](../../img/1606-3.png)

- 组件11：点击按钮控制旗上升和停止

#### 20.4 实验结果

1\. 外接电源，选择好正确的开发板板型（ESP32 Dev Module）和 适当的串口端口（COMxx），上传代码前单击KidsBlock IDE右下角的![Sarial2](../../img/Sarial2.png)，设置串口波特率为`9600`。

   ![Buadrate](../../img/Buadrate.png)

2\. 然后单击按钮![upload](../../img/upload.png)上传代码。上传代码成功后，可以看到打印的IP地址 (<span style="color: rgb(255, 76, 65);">如果看不到，可以按下复位按键重新连接一次</span>)：

   ![1108](../../img/1108.png)

   OLED显示屏上同步显示IP地址：

   ![1109](../../img/1109.png)

2\. 将 **你的IP地址** 输入到手机/电脑浏览器并打开，即可访问智慧校园页面。

   ⚠️ <span style="color: rgb(200, 70, 100);">注意：确保手机/电脑与ESP32连接到同一个 WiFi 。</span>

   ![ASZ12](../../img/ASZ12.png)

   ![1607](../../img/1607.png)

   可以看到实时显示温度值、湿度值和室内光照值，方便我们监测教室内的情况。

   按下![1608](../../img/1608.png)，缓慢调节拉开窗帘。

   按下![1609](../../img/1609.png)，缓慢调节关闭窗帘。

   按下![1610](../../img/1610.png)，打开教室灯。

   按下![1611](../../img/1611.png)，打开校园路灯。

   按下![1612](../../img/1612.png)，控制校园大门。

   按下![1623](../../img/1623.png)，控制课堂铃声。

   按下![1624](../../img/1624.png)，控制旗帜下降与停止。(⚠️ <span style="color: rgb(255, 76, 65);">特别注意：当按下 ![opq0](../../img/opq0.png) 按钮，旗帜下降时，需要立马再次按下 ![opq0](../../img/opq0.png) 按钮，使旗帜停止下降，要不然时间长了电机会把橡胶皮带转飞出去</span>)

   按下![1625](../../img/1625.png)，控制旗帜上升与停止。(⚠️ <span style="color: rgb(255, 76, 65);">特别注意：当按下 ![opq0](../../img/opq0.png) 按钮，旗帜上升时，需要立马再次按下 ![opq0](../../img/opq0.png) 按钮，使旗帜停止上升，要不然时间长了电机会把橡胶皮带转飞出去</span>)    

![dongtu33](../../img/dongtu33.gif)

#### 20.5 常见问题解决

1\. 若串口监视器无任何信息打印，请按下ESP32主板的复位键：

   ![RESET](../../img/RESET.png)

2\. 若ESP32 一直没有获取到 IP 地址，通常是因为 WiFi 连接失败，解决办法：

   - 确保代码里的 WiFi 名称和 WiFi密码已经替换为您自己的 Wi-Fi名称 和 WiFi密码。
   
   - 确保你的 WiFi 网络是 2.4GHz 的，ESP32不支持 5GHz WiFi。

3\. 若输入IP地址无页面，解决办法：

   - 确保IP地址输入正确。
   
   - 检查手机/电脑是否与ESP32在同一网络。

